<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/fenye.css">
    <style>
        .main .body .xuan .bian:hover {
            background-color: #32c8ab;
            border-color: #32c8ab;
        }
    </style>
</head>

<body>
    <header class="head">
        <nav>
            <a href="http://localhost/wjj/index.html">
                <img src="https://www.kuangstudy.com/assert/images/index_topleft_logo_black.png" alt="">
            </a>
            <div class="headCenter">
                <a href="http://127.0.0.1:5500/joint-project/project/class/html/sub.html">课程</a>
                <span class="sp1">热门</span>
                <a href="http://127.0.0.1:5500/joint-project/project/jianghu/html/lakes.html">江湖</a>
                <a href="http://127.0.0.1:5500/joint-project/project/zhuanlan/index.html">专栏</a>
                <a href="http://127.0.0.1:5500/joint-project/project/xinjianming/index.html">下载</a>
                <a href="http://127.0.0.1:5500/joint-project/project/NavLast/NavLast.html">导航</a>
            </div>
            <div class="right">
                <a href="javascript:;">
                    <i class="iconfont icon-denglu"></i>
                    登录
                </a>
         </div>
        </nav>
        <div class="denglu">
            <h2>账号登录</h2>
            <span class="exit">×</span>
                <input type="text" placeholder="请输入手机号 或 用户数字编号 登录">
                <input type="password" placeholder="请输入6-18位密码">
                <input type="button" value="登录">
                <p class="p1"><a href="javascript:;">微信扫描注册/登录</a></p>
                <p class="p2">
                    登录即代表你同意
                    <a href="javascript:;">用户协议</a>
                    和
                    <a href="javascript:;">隐私政策</a>
                </p>
         </div>
    </header>
    <div class="main">
        <div class="body">
            <div class="xuan">
                <p class="in">
                    <input type="button" value="全部" class="on">
                    <input type="button" value="vip课程">
                    <input type="button" value="狂神笔记代码">
                    <input type="button" value="飞哥笔记代码">
                </p>
                <p>
                    <span>查找文件:</span>
                    <input type="text" placeholder="请输入文件名称进行检索!">
                    <input type="button" value="搜索" class="on bian">
                </p>
            </div>
            <div class="tis">
                <p>提示：普通会员购买后的文件可以在【我的下载】中进行查看，下载失败可以尝试切换浏览器！</p>
            </div>
            <div class="bod">
                <li class="header">
                    <div></div>
                    <div>
                        <span>标题</span>
                    </div>
                    <div>
                        <span>分类</span>
                    </div>
                    <div>
                        <span>大小</span>
                    </div>
                </li>
                <div>
                    <span>下载</span>
                </div>
            </div>
            <div class="pagination"></div>

        </div>
    </div>
    <div class="footer">
        <p>
            <a href="javascript:;">关于我们</a>
            <span>&nbsp;|&nbsp;</span>
            <a href="javascript:;">加入我们</a>
            <span>&nbsp;|&nbsp;</span>
            <a href="javascript:;">联系我们</a>
        </p>
        <p>
            <span>Copyright © 广东学相伴网络科技有限公司 </span>
            <a href="javascript:;">粤ICP备 - 2020109190号 </a>
        </p>
    </div>
    <div class="huid">
        <a href="javascript:;"><svg class="icon"
                style="font-size:30px;width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10467">
                <path
                    d="M857.6 524.8c-8.533333 0-17.066667-4.266667-23.466667-8.533333L512 192 187.733333 516.266667c-12.8 12.8-34.133333 10.666667-44.8-2.133334s-10.666667-32 0-42.666666L475.733333 138.666667c21.333333-21.333333 55.466667-21.333333 74.666667 0L881.066667 469.333333c12.8 12.8 12.8 32 0 44.8-6.4 6.4-14.933333 10.666667-23.466667 10.666667zM857.6 900.266667c-8.533333 0-17.066667-2.133333-23.466667-8.533334L512 567.466667 187.733333 891.733333c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8l332.8-330.666666c21.333333-21.333333 55.466667-21.333333 74.666667 0l330.666667 330.666666c12.8 12.8 12.8 32 0 44.8-6.4 6.4-14.933333 8.533333-23.466667 8.533334z"
                    p-id="10468"></path>
            </svg>
            <p>Top</p>
        </a>
    </div>
    <script src="js/index2.js"></script>
    <script src="js/index.js"></script>
    <script src="js/pan.js"></script>
    <script>
        {
            class Top {
                constructor() {
                    this.Li = document.querySelector('.main .body')
                    this.On = document.querySelectorAll('.main .body .xuan .in input')
                    this.Xuan()
                    this.Fn()
                    // this.Biao()
                }
                Fn() {

                    let xhr = new XMLHttpRequest()
                    xhr.open('get', 'http://192.168.10.28:8080/qfDownload/selectAll', true)
                    xhr.send()
                    xhr.onload = () => {
                        let json = JSON.parse(xhr.responseText)
                        console.log(json)
                        this.Fen(json.data.length - 0)
                        this.Xuan()
                    }
                }
                Fen(count) {
                    new Pagination('.pagination', {
                        strClass: 'prev, list, next, go, total',
                        // 总条数
                        total: count,
                        // 每页多少条
                        limitArr: [10],
                        // 当前页
                        num: 1,
                        callback(index) {
                            // console.log(index)
                            // this.Biao()
                            // getData(index, '')
                            // this.Biao(index,'')
                            (index, txt) => {
                                let xhr = new XMLHttpRequest()
                                xhr.open('get', 'http://192.168.20.203:8080/qfDownload/selectAll', true)
                                xhr.send()
                                xhr.onload = () => {
                                    let json = JSON.parse(xhr.responseText)

                                    // console.log(json)
                                    // console.log(this.Li)
                                    // console.log(this.On)
                                    json.data.forEach(ele => {
                                        this.Li.innerHTML += `
                    <div class="bod">
                    <li class="header">
                    <div></div>
                    <div>
                        <span>${ele.dname}</span>
                    </div>
                    <div>
                        <span>${ele.categoryname}</span>
                    </div>
                    <div>
                        <span>${ele.filesize}</span>
                    </div>
                    
                </li>
                <div>
                    <a en="${ele.id}" class="ele"  herf="http://192.168.1.94:8080/${ele.ddesc}" download="">
                    <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5401"><path d="M840.5 900.3h-657c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9h657.1c16.5 0 29.9-13.4 29.9-29.9-0.1-16.6-13.5-29.9-30-29.9zM631.5 123.7V541.8H763.1L512 769.9l-251.2-228h131.7V123.7h239m0-59.7h-239c-33 0-59.7 26.7-59.7 59.7v358.4H183.5c-26.6 0-39.9 32.2-21.1 51l328.5 298.2c5.8 5.8 13.5 8.7 21.1 8.7s15.3-2.9 21.1-8.7l328.5-298.2c18.8-18.8 5.5-51-21.1-51H691.2V123.7c0-33-26.7-59.7-59.7-59.7z" p-id="5402"></path></svg>
                  <span>下载</span>
                  
                </a>

                </div>
                </div>
                `
                                    })
                                }
                            }
                        }
                    })
                }
                
                Xuan() {
                    // console.log(this.On)
                    this.On.forEach((ele, index) => {
                        ele.onclick = () => {
                            // console.log(this.On)
                            for (let i = 0; i < this.On.length; i++) {
                                this.On[i].classList.remove('on')
                            }
                            this.On[index].classList.add('on')
                            let xhr = new XMLHttpRequest()
                            xhr.open('get', 'http://192.168.1.94:8080//qfDownload/selectByCategoryName', true)
                            xhr.send()
                            xhr.onload = () => {
                                let json = JSON.parse(xhr.responseText)
                                console.log(json)
                                // console.log(this.Li)
                                // console.log(this.On)
                                json.data.forEach(ele => {
                                    this.Li.innerHTML += `
                    <div class="bod">
                    <li class="header">
                    <div></div>
                    <div>
                        <span>${ele.dname}</span>
                    </div>
                    <div>
                        <span>${ele.categoryname}</span>
                    </div>
                    <div>
                        <span>${ele.filesize}</span>
                    </div>
                    
                </li>
                <div>
                    <a en="${ele.id}" class="ele"  herf="http://192.168.1.94:8080/${ele.ddesc}" download="">
                    <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5401"><path d="M840.5 900.3h-657c-16.5 0-29.9 13.4-29.9 29.9s13.4 29.9 29.9 29.9h657.1c16.5 0 29.9-13.4 29.9-29.9-0.1-16.6-13.5-29.9-30-29.9zM631.5 123.7V541.8H763.1L512 769.9l-251.2-228h131.7V123.7h239m0-59.7h-239c-33 0-59.7 26.7-59.7 59.7v358.4H183.5c-26.6 0-39.9 32.2-21.1 51l328.5 298.2c5.8 5.8 13.5 8.7 21.1 8.7s15.3-2.9 21.1-8.7l328.5-298.2c18.8-18.8 5.5-51-21.1-51H691.2V123.7c0-33-26.7-59.7-59.7-59.7z" p-id="5402"></path></svg>
                  <span>下载</span>
                  
                </a>

                </div>
                </div>
                `
                                })

                            }
                        }
                    })


                }

            }
            new Top()
        }
    </script>
</body>

</html>
